import React, { useState } from 'react';
import { Link, Route } from "react-router-dom"
import { Layout, Menu } from 'antd';
import { Dropdown,message, Space} from 'antd';
import { getStorage, removeStorage } from "../../utils/LocalStorage"


import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';

//引入系统信息和个人信息组件
import SystemInformation from "@/components/BasicInformation/SystemInformation"
import SelfInformation from "@/components/BasicInformation/SelfInformation"
//权限管理的相关组件
import Componey from "@/components/Authority/Componey"
import Jurisdiction from "@/components/Authority/Jurisdiction"
import Stuff from "@/components/Authority/Stuff"

import Pushwarehouse from "./../Warehouse/Pushwarehouse/index.tsx"
import Outwarehouse from "./../Warehouse/Outwarehouse/index.tsx"
import Construct from "./../Warehouse/Construct/index.tsx"
import Management from "./../Warehouse/Management/index.tsx"
import Show from "./../Warehouse/Show/index.tsx"

import List from "../../components/List"
import Add from "../../components/Add"
import Classify from "../../components/Classify"
import PriceBook from "../../components/PriceBook"
import "./style.css"

import Buying from '../../component/purchase/buying'
import Supplier from '../../component/purchase/supplier'
import ShoppingCade from '../../component/purchase/shoppingCade'
import GoodsReturn from '../../component/purchase/goodsReturn'
import AddSupplier from '../../component/purchase/supplier/ui'

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const Index = (props) => {
  //账号
  const [username] = useState(getStorage("username") ? (getStorage("username")) : [])
  //点击退出登录的处理事件
  function handleMenuClick() {
    removeStorage("username")
    removeStorage("token")
    message.info('退出登陆成功');
    props.history.push("/login")
  }
  //账号菜单选择
  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="1" icon={<UserOutlined />}>
        点击退出账号
      </Menu.Item>
    </Menu>
  );
  return (

    <>
      <Layout style={{ height: "100%" }}>
        <Header className="header" style={{ padding: "0" }}>
          <div className="logo" >
            MARK后台管理系统
          </div>
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1"><Link to='/home/add'>添加商品</Link></Menu.Item>
            <Menu.Item key="2"><Link to='/home/list'>商品列表</Link></Menu.Item>
            <Menu.Item key="3"><Link to="/home/supplier">供应商管理</Link></Menu.Item>
            <Menu.Item key="5"><Link to ="/home/Pushwarehouse">商品入库</Link></Menu.Item>
            <Menu.Item key="6"><Link to ="/home/Outwarehouse">商品出库</Link></Menu.Item>
          </Menu>

          {/* //右侧用户名称及退出登录 */}
          <div className="user" style={{ position: "absolute", right: "0px", top: "0px", marginRight: "2rem" }}>
            <Space wrap>
              <Dropdown.Button overlay={menu}>
                {username}
              </Dropdown.Button>
            </Space>,
          </div>


        </Header>
        <Layout>

          <Sider width={200} className="site-layout-background">
            <Menu
              mode="inline"
              // defaultSelectedKeys={['1']}
              // defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              {/* 这里写系统信息和个人信息的link信息 */}
              <SubMenu key="sub1" icon={<UserOutlined />} title="基础信息">
                <Menu.Item key="1"><Link to={props.match.path + "/systeminformation"}>系统首页</Link></Menu.Item>
                <Menu.Item key="2"><Link to={props.match.path + "/selfinformation"}>个人信息</Link></Menu.Item>
              </SubMenu>
              <SubMenu key="sub2" icon={<LaptopOutlined />} title="商品管理">

                <Menu.Item key="5"> <Link to='/home/list'>商品列表</Link> </Menu.Item>
                <Menu.Item key="6"> <Link to='/home/add'>添加商品</Link> </Menu.Item>
                <Menu.Item key="7"><Link to='/home/classify'>商品分类编辑</Link></Menu.Item>
                <Menu.Item key="8"><Link to='/home/pricebook'>商品价格本</Link></Menu.Item>
              </SubMenu>
              <SubMenu key="sub3" icon={<NotificationOutlined />} title="数据报表">
                <Menu.Item key="9">订单报表</Menu.Item>
                <Menu.Item key="10">销售报表</Menu.Item>
                <Menu.Item key="11">财务报表</Menu.Item>
              </SubMenu>
              <SubMenu key="sub4" icon={<NotificationOutlined />} title="采购管理">
              <Menu.Item key="12"><Link to="/home/supplier">供应商管理</Link></Menu.Item>
                <Menu.Item key="13"><Link to="/home/buying">请购单管理</Link></Menu.Item>
                <Menu.Item key="14"><Link to="/home/shoppingCade">采购单管理</Link></Menu.Item>
                <Menu.Item key="15"><Link to="/home/goodsReturn">退货单管理</Link></Menu.Item>
              </SubMenu>
              <SubMenu key="sub5" icon={<NotificationOutlined />} title="仓库管理">
                <Menu.Item key="16"> <Link to ="/home/Pushwarehouse">入库管理</Link></Menu.Item>
                <Menu.Item key="17"> <Link to ="/home/Outwarehouse">出库管理</Link></Menu.Item>
                <Menu.Item key="18"><Link to ="/home/Construct">仓库结构 </Link></Menu.Item>
                <Menu.Item key="19"> <Link to ="/home/Construct">仓储管理</Link></Menu.Item>
                <Menu.Item key="20"> <Link to ="/home/Show">仓库报表</Link></Menu.Item>
              </SubMenu>
              <SubMenu key="sub6" icon={<NotificationOutlined />} title="权限管理">
                <Menu.Item key="21"><Link to={props.match.path + "/stuff"}>员工管理</Link></Menu.Item>
                <Menu.Item key="22"><Link to={props.match.path + "/componey"}>公司架构</Link></Menu.Item>
                <Menu.Item key="23"><Link to={props.match.path + "/jurisdiction"}>权限分配</Link></Menu.Item>
              </SubMenu>
            </Menu>
          </Sider>
          <Layout>
            <Content
              className="site-layout-background"
              style={{
                padding: 10,
                margin: 0,
                // minHeight: 280,
              }}
            >
              {/* 此处为路由匹配规则 */}
              <Route path="/home/selfinformation" component={SelfInformation} />
              <Route path="/home/systeminformation" component={SystemInformation} />

              <Route path="/home/componey" component={Componey} />
              <Route path="/home/jurisdiction" component={Jurisdiction} />
              <Route path="/home/stuff" component={Stuff} />
              <Route path = "/home/Pushwarehouse" component={Pushwarehouse}/>
              <Route path = "/home/Outwarehouse" component={Outwarehouse}/>
              <Route path = "/home/Construct" component={Construct}/>
              <Route path = "/home/Management" component={Management}/>
              <Route path = "/home/Show" component={Show}/>
              
              <Route path="/home/list" component={List} />
              <Route path="/home/add" component={Add} />
              <Route path="/home/classify" component={Classify} />
              <Route path="/home/pricebook" component={PriceBook} />

              <Route path='/home/supplier' component={Supplier}/>
              <Route path='/home/buying' component={Buying}/>    
              <Route path='/home/shoppingCade' component={ShoppingCade}/> 
              <Route path='/home/GoodsReturn' component={GoodsReturn}/>   
              <Route path='/home/AddSupplier' component={AddSupplier}/>
        </Content>
          </Layout>


        </Layout>
      </Layout>
    </>
  );
}

export default Index;
